<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册网页</title>
    <link rel="shortcut icon" href="/img/xuexi.png">
    <script src="../lib/jquery.min.js"></script>
    <script type="text/javascript" src="./js/common.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        .main {
            position: relative;
            margin: 0 auto;
            width: 400px;
        }

        .container {
            width: 400px;
        }

        .xinxi {
            width: 396px;
            height: 35px;
            margin-top: 10xp;

        }

        input {
            margin-top: 10px;
            height: 43px;
        }

        #btn_log {
            width: 45%;
            margin-left: 94px;
            position: relative;
            float: left;
            margin-top: -43px;

        }
    </style>

    <script>
        $(function () {
            $("#btn_log").hide();
            $("#btn_zc").click(function () {
                $name = $(`#txt_name`).val();
                $xh = $(`#txt_xh`).val();
                $bj = $(`#txt_bj`).val();
                $xy = $(`#txt_xy`).val();
                $zy = $(`#txt_zy`).val();
                $pw = $(`#txt_pw`).val();
                $rid = $(`#txt_id`).val();
                if ($name == '' || $xh == '' || $bj == '' || $xy == '' || $zy == '' || $pw == '' || $rid == '') {
                    alert('请填写完整');
                    return;
                };
                var params = `name=${$('#txt_name').val()}&xh=${$('#txt_xh').val()}
                &bj=${$('#txt_bj').val()}&xy=${$('#txt_xy').val()}
                &zy=${$('#txt_zy').val()}&pw=${$('#txt_pw').val()}
                &rid=${$('#txt_id option:selected').val()}`;
                //console.log(params);
                var rpar = {
                    name:$('#txt_name').val(),
                    num:$('#txt_xh').val(),
                    bclass:$('#txt_bj').val(),
                    colleage:$('#txt_xy').val(),
                    major:$('#txt_zy').val(),
                    pwd:$('#txt_pw').val(),
                    rid:$('#txt_id option:selected').val()
                }
                console.log(rpar)
                //向后台发起请求
                //新版jQuery中ajax方法支持promise，ajax方法返回值是一个promise对象

                $.ajax({
                    type: "POST",        //请求方式
                    url: ipurl+`/user/registered`,  //服务器地址
                    data: rpar,        //提交给后台的数据  
                    success:function(result){
                        console.log(result);
                        if (result.code == 400 && result.msg == "用户名已经存在") {

                            alert('用户名已存在，返回登陆？')
                            $("#btn_log").show();

                            $('#btn_log').click(function () {
                                window.location.replace("login.html");
                            })
                        }
                        if (result.code == '200' && result.msg == '注册成功') {
                            alert('注册成功')
                            $("#btn_log").show();
                            $('#btn_log').click(function () {
                                window.location.replace("login.html");
                            })
                        }
                    },
                    err:function(result){
                        console.log('请求失败：', err);
                        alert('注册失败');
                    }
                });

            });
        });
    </script>
</head>

<body>
    <div class="main">
        <img src="./img/zhuce.png" alt="注册" style="margin: 0 auto;display: block;">
        <div class="container">
            <input id="txt_name" type="text" placeholder="姓名 " class="xinxi">
            <input id="txt_xh" type="text" placeholder="学号 " class="xinxi">
            <input id="txt_xy" type="text" placeholder="学院 " class="xinxi">
            <input id="txt_zy" type="text" placeholder="专业 " class="xinxi">
            <input id="txt_bj" type="text" placeholder="班级 " class="xinxi">
            <input id="txt_pw" type="text" placeholder="密码 " class="xinxi">
            <select id="txt_id" class="xinxi" style="margin-top: 10px;height: 43px;">
                <option value="学生" selected style="height: 15px;">学生</option>
                <option value="老师" style="height: 15px;">老师</option>
            </select>

            <input id="btn_zc" type="button" value="注册" style="width: 45%;margin-left: 94px;">
            <input id="btn_log" type="button" value="点击返回登陆">
        </div>
    </div>

</body>

</html>